<template>
  <!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
     In this case we also add a background color so we can see that area. -->
  <div
    id="myDiagramDiv"
    style="width: 100%; height: 600px; background-color: #dae4e4"
  ></div>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
let myDiagram = null;

var $ = go.GraphObject.make;
const init = () => {
  myDiagram = $(go.Diagram, "myDiagramDiv", {
    initialContentAlignment: go.Spot.Center, // center Diagram contents
    "undoManager.isEnabled": false, // enable Ctrl-Z to undo and Ctrl-Y to redo
  });
  myDiagram.add(
    new go.Part(go.Panel.Vertical, {
      position: new go.Point(-50, 0),
      background: "lightgray",
      // width: 50,
      defaultStretch: go.Stretch.Horizontal,
      defaultAlignment: go.Spot.Right,
    })
      .add(
        new go.TextBlock("a longer string", { background: "lightgreen" }),
        new go.TextBlock("left", {
          background: "lightgreen",
        }),
        new go.TextBlock("center", {
          background: "lightgreen",
        }),
        new go.TextBlock("right", {
          background: "lightgreen",
        }),
        new go.TextBlock("stretch", {
          background: "lightgreen",
          stretch: go.Stretch.Fill,
          editable: true,
          maxSize: new go.Size(50, NaN),
        })
      )
      .add(
        new go.Shape("Circle", {
          fill: new go.Brush("Linear", { 0.0: "blue", 1.0: "red", start: go.Spot.Bottom, end: go.Spot.Top }),
          stroke: "#DFBB00",
          strokeWidth: 4,
          background: "coral",
        })
      )
  );
  myDiagram.add(
    new go.Part("Vertical", {
      position: new go.Point(70, 0),
      background: "lightgray",
      width: 50,
      // height: 65,
      // 反转方向
      isOpposite: true,
    }).add(
      new go.TextBlock("a longer string", { background: "lightgreen" }),
      new go.TextBlock("left", {
        background: "lightgreen",
        alignment: go.Spot.Left,
      }),
      new go.TextBlock("center", {
        background: "lightgreen",
        alignment: go.Spot.Center,
      }),
      new go.TextBlock("right", {
        background: "lightgreen",
        alignment: go.Spot.Right,
      }),
      new go.TextBlock("stretch", {
        background: "lightgreen",
        stretch: go.Stretch.Fill,
      })
    )
  );
};
onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped></style>
